<template>
  <div class="container">
    <el-card>
      <div class="reg_box">
        <div class="header">注册校验</div>
        <div class="regbody">
          <div class="status">
            <span class="statu">身份</span>
            <el-radio-group v-model="regForm.role" fill="#60B879">
              <el-radio fill="#60B879" :label="0">管理员</el-radio>
              <el-radio :label="1">教师</el-radio>
              <el-radio :label="2">学生</el-radio>
            </el-radio-group>
          </div>
          <div class="reg_form">
            <!-- <div class="username"></div>
                <div class="stunum"></div>
                <div class="password"></div>
                <div class="repassword"></div> -->

            <el-form ref="regRef" :model="regForm" :rules="regRules">
              <el-form-item prop="username">
                <el-input v-model="regForm.username" placeholder="用户名">
                  <i slot="prefix" class="el-input__icon el-icon-user"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="stunum">
                <el-input v-model="regForm.stunum" placeholder="学号/工号">
                  <i slot="prefix" class="el-input__icon el-icon-user"></i
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input type="password" v-model="regForm.password" placeholder="密码">
                  <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="repassword">
                <el-input type="password" v-model="regForm.repassword" placeholder="确认密码">
                  <i slot="prefix" class="el-input__icon el-icon-unlock"></i
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="reg_button">
            <el-button type="primary" @click="register">注册</el-button>
          </div>
          <div class="go_login">
             <el-link type="success" :underline="false" @click="goLogin">去登录</el-link></el-link>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { reqRegister } from '@/api/user'
export default {
  name: "Register",
  data() {
    const checkPassord = (rule,value,callback) => {
        if(!value) {
            callback (new Error('请再次输入密码'))
        }
        else if(value != this.regForm.password) {
            callback (new Error('两次输入密码不一致'))
        }else {
            callback()
        }
    }
    return {
      regForm: {
        username: "",
        stunum: "",
        password: "",
        repassword: "",
        role: 1
      },
      regRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" },
        ],
        stunum: [
          { required: true, message: "请输入学号/工号", trigger: "blur" },
          { min: 6, max: 13, message: "长度在 6 到 13 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 6, message: "长度在 6 到 13 个字符", trigger: "blur" },
        ],
        repassword: [
            { validator: checkPassord, trigger: 'blur' }
          ]
      },
    };
  },
  methods: {
    register() {
        this.$refs.regRef.validate(async (valid) => {
            if(!valid) {
                this.$message.error('请确认信息无误！')
                return false
            }else {
                const { data: res } = await reqRegister(this.regForm)
                if(res.code != 200) return this.$message.error(res.msg)
                this.$message.success(res.msg)
                this.$router.push('/login')
            }
        })
    },
    goLogin() {
      this.$router.push('/login')
    }
  },
};
</script>

<style scoped>
.container {
  background-color: #516681;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-card {
  width: 23%;
}
.header {
  font-size: 26px;
  color: #516681;
  margin: 10px 0 20px 0;
  text-align: center;
  font-weight: bold;
}
.status {
  margin: 12px 0;
}
.statu {
    margin-right: 15px;
}
.el-button {
    width: 100%;
}
/deep/ .el-radio__input.is-checked .el-radio__inner {
    border-color: #516681;
    background: #516681; 
}
/deep/ .el-radio__input.is-checked+.el-radio__label {
    color: #528DAB;
}
/deep/ .el-button--primary {
    color: #FFF;
    background-color: #528DAB;
    border-color: #528DAB;
}
</style>